<template>
  <div class="phone">
    <font style="font-size:20px;color:gray;cursor:pointer;" @click="$router.push({path:'/me'})"><返回</font>
    <yanzhengma :fontsize='fontsize' :color='color' @sure='phoneshow'></yanzhengma>
    <button class="sure" type="button" ref="btn" @click='sendphone'>确认修改</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import yanzhengma from '../components/yanzhengma'
export default {
  name: "phone",
  data() {
    return {
      time: "发送验证码",
      isdisabled: true,
      yanzhengma: "",
      fontsize:'16px',
      color:'gainsboro',
      phonenum:''
    };
  },
  components:{
    yanzhengma:yanzhengma
  },
  methods: {
    ...mapMutations(["setvalidation", "login",'setphone']),
    phoneshow(value){  
      if (value.msg=='success') {
        this.$refs.btn.style.background = "rgb(0,166,255)";
        this.$refs.btn.style.color = "white";
        this.$refs.btn.type = "submit";
        this.phonenum=value.phonenum;
      } else {
        this.$refs.btn.style.background = "rgb(211,211,211)";
        this.$refs.btn.type = "button";
        this.$refs.btn.style.color = "gray";
      }
    },
   sendphone(){
     if(this.$refs.btn.type == "submit"){
       this.axios.post('http://127.0.0.1:3000/changephone',{oldphone:this.$store.state.phone,newphone:this.phonenum})
       .then((res)=>{
         if(res.data.msg==1){
           this.$store.commit('setphone',this.phonenum)
           this.$router.push('/me')
         }else{
           alert('该手机号已经被注册了')
         }
       })
       .catch((err)=>{
         console.log(err)
       })
     }
     else{
       alert('手机号格式不正确或者验证码错误')
     }
   }
  },
};
</script>

<style scoped>
.yanzhenginput {
  width: 80%;
  outline: none;
  background: none;
  border: none;
}
.yanzhengbtn {
  outline: none;
  background: none;
  border: none;
}
.sure {
  width: 100%;
  height: 58px;
  outline: none;
  border: none;
  border-radius: 5px;
  margin-top: 20px;
  font-size: 20px;
  color: gray;
}
.phone {
  width: 85%;
  margin: 20px auto;
}
.phoneinput {
  outline: none;
  background: none;
  border: none;
  border-bottom: 1px solid gainsboro;
  width: 100%;
  height: 45px;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
}
</style>














